<template>
    <div class="home-ruoyi">
        <!-- 顶部介绍与技术选型 -->
        <el-row :gutter="40" class="top-section">
            <el-col :span="16">
                <div class="intro-block">
                    <h1 class="title">滴滴后台管理系统</h1>
                    <div class="desc">
                        滴滴后台管理系统是一套为平台内部运营人员设计的管理工具，涵盖角色管理、管理员管理、用户管理、司机管理、订单管理、优惠券管理等核心模块。系统支持角色权限分配、管理员与用户信息管理、司机状态控制与投诉处理、订单多条件查询及异常订单标记、优惠券创建与发放等功能。各模块均支持分页查询与状态修改，系统根据用户角色展示不同菜单内容，实现了权限精细化管理，提升了平台运维效率与数据安全性。
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="tech-block">
                    <h2 class="tech-title">技术选型</h2>
                    <el-row>
                        <el-col :span="12">
                            <div class="tech-list-title">后端技术</div>
                            <ul class="tech-list">
                                <li>SpringBoot</li>
                                <li>Spring Security</li>
                                <li>JWT</li>
                                <li>MyBatis</li>
                                <li>Druid</li>
                                <li>Fastjson</li>
                                <li>...</li>
                            </ul>
                        </el-col>
                        <el-col :span="12">
                            <div class="tech-list-title">前端技术</div>
                            <ul class="tech-list">
                                <li>Vue</li>
                                <li>Vuex</li>
                                <li>Element-UI</li>
                                <li>Axios</li>
                                <li>Sass</li>
                                <li>Quill</li>
                                <li>...</li>
                            </ul>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>

        <!-- 下方三栏卡片 -->
        <el-row :gutter="20" class="mt30">
            <el-col :span="8">
                <el-card shadow="hover">
                    <template #header>
                        <span>更新日志</span>
                    </template>
                    <el-timeline>
                        <el-timeline-item v-for="(item, idx) in changelog" :key="idx" :timestamp="item.date"
                            placement="top">
                            {{ item.version }}
                        </el-timeline-item>
                    </el-timeline>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const changelog = ref([
    { version: 'v1.0', date: '2025-05-22' },
    { version: 'v2.0', date: '2025-05-29' },
    { version: 'v3.0', date: '2025-06-04' }])
</script>

<style scoped>
.home-ruoyi {
    padding: 32px 24px;
    background: #fff;
    min-height: 100vh;
}

.top-section {
    margin-bottom: 30px;
}

.intro-block {
    padding-right: 30px;
}

.title {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 10px;
}

.desc {
    color: #666;
    font-size: 16px;
    margin-bottom: 18px;
    line-height: 1.8;
}

.version-row {
    margin-bottom: 16px;
    font-size: 16px;
}

.ml10 {
    margin-left: 10px;
}

.btn-row {
    margin-bottom: 10px;
}

.tech-block {
    border-left: 1px solid #eee;
    padding-left: 30px;
}

.tech-title {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 10px;
}

.tech-list-title {
    font-weight: 500;
    margin-bottom: 6px;
}

.tech-list {
    padding-left: 18px;
    margin: 0 0 12px 0;
    color: #444;
    font-size: 15px;
}

.mt30 {
    margin-top: 30px;
}

.contact-info p {
    margin: 8px 0;
    font-size: 15px;
    color: #444;
    word-break: break-all;
}

.donate-block {
    text-align: center;
}

.donate-tip {
    color: #888;
    font-size: 14px;
    margin-top: 8px;
}
</style>